{% block sw_property_detail_base %}
<mt-card
    v-if="propertyGroup"
    position-identifier="sw-property-detail-base"
    :title="$tc('sw-property.detail.cardTitleGroupInfo')"
    :is-loading="isLoading"
>

    {% block sw_property_detail_base_name %}

    <mt-text-field
        v-model="propertyGroup.name"
        name="sw-field--propertyGroup-name"
        required
        :error="propertyGroupNameError"
        :label="$tc('sw-property.detail.labelName')"
        :placeholder="placeholder(propertyGroup, 'name', $tc('sw-property.detail.placeholderName'))"
        :disabled="!allowEdit"
    />
    {% endblock %}

    {% block sw_property_detail_base_description %}
    <mt-textarea
        v-model="propertyGroup.description"
        name="sw-field--propertyGroup-description"
        :label="$tc('sw-property.detail.labelDescription')"
        :placeholder="placeholder(propertyGroup, 'description', $tc('sw-property.detail.placeholderDescription'))"
        :disabled="!allowEdit"
    />
    {% endblock %}

    {% block sw_property_detail_filter_visible_container %}
    <sw-container
        columns="repeat(2, 1fr)"
        gap="0px 30px"
    >
        {% block sw_property_detail_base_filterable %}

        <mt-switch
            v-model="propertyGroup.filterable"
            name="propertyGroupFilterable"
            class="sw-property-detail__filterable"
            :label="$tc('sw-property.detail.labelFilterable')"
            :disabled="!allowEdit"
        />
        {% endblock %}

        {% block sw_property_detail_base_visible_on_detail %}

        <mt-switch
            v-model="propertyGroup.visibleOnProductDetailPage"
            name="propertyGroupvisibleOnProductDetailPage"
            class="sw-property-detail__visible-on-detail"
            :label="$tc('sw-property.detail.labelvisibleOnProductDetailPage')"
            :disabled="!allowEdit"
        />
        {% endblock %}
    </sw-container>
    {% endblock %}

    {% block sw_property_detail_sorting_display_container %}
    <sw-container
        columns="repeat(3, 1fr)"
        gap="0px 30px"
    >
        {% block sw_property_detail_display_type %}
        <mt-select
            v-model="propertyGroup.displayType"
            name="sw-field--propertyGroup-displayType"
            validation="required"
            required
            :label="$tc('sw-property.detail.labelDisplayType')"
            :disabled="!allowEdit"
            :options="displayTypeOptions"
        />
        {% endblock %}

        {% block sw_property_detail_sorting_type %}
        <mt-select
            v-model="propertyGroup.sortingType"
            name="sw-field--propertyGroup-sortingType"
            validation="required"
            :disabled="!allowEdit"
            required
            :label="$tc('sw-property.detail.labelSortingType')"
            :options="sortingTypeOptions"
        />
        {% endblock %}

        {% block sw_property_detail_position %}
        <mt-number-field
            v-model="propertyGroup.position"
            name="sw-field--propertyGroup-position"
            pattern="[0-9]"
            :step="1"
            :label="$tc('sw-property.detail.labelPosition')"
            :disabled="!allowEdit"
            :placeholder="$tc('sw-property.detail.placeholderPosition')"
        />
        {% endblock %}
    </sw-container>
    {% endblock %}
</mt-card>
{% endblock %}
